<!-- 人人钻明细 -->
<template>
    <div class="page">
        <h3 class="no-profit-data" v-if="!profitData.length">暂无收益明细！</h3>
        <cube-scroll ref="scroll" :data="profitData" :options="options" @pulling-up="onPullingUp">
            <div class="item" v-for="(item, index) in profitData" :key="index">
                <h3><span :class="{'special-tip': item.type == 20}">{{item.title}}</span><strong>+{{item.cvnt}}CVNT</strong></h3>
                <p>{{item.createTime}}</p>
            </div>
        </cube-scroll>
    </div>
</template>

<script>

  import {getIncomeDetail} from 'api/register'

  export default {

    data() {
      return {
        uid: '',
        token: '',
        page: 1,
        per: 10,
        profitData: [],
        sw: true,
        options: {
          click: true,
          tap: true,
          pullUpLoad: {
            threshold: 0,
            txt: {
              more: '上拉加载更多',
              noMore: '没有更多数据了'
            }
          }
        }
      }
    },
    beforeRouteEnter (to, from, next) {
      next((vm) => {
        vm.page = 1;
        vm.sw = true;
        let uid = to.query.uid;
        let token = to.query.token;
        vm.uid = uid;
        vm.token = token;
        vm.getProfitData();
      })
    },
    created() {

    },
    mounted() {
      document.body.addEventListener('touchstart', function () { });
    },
    methods: {
      getProfitData() {
        getIncomeDetail(this.page, this.per).then((data) => {/* this.uid, this.token,  */
          // console.log(data);
          if (data.status && data.status == 1) {
            if (data.data && data.data.length > 0) {
              this.profitData = data.data;
            }
            if (!data.data || data.data.length == 0) {
              this.profitData = [];
            }
          }
        })
      },
      onPullingUp() {
        this.page++;
        if (this.sw) {
          getIncomeDetail(this.page, this.per).then((data) =>{/* this.uid, this.token, */
            if (data.status && data.status == 1) {
              if (data.data && data.data.length > 0) {
                this.profitData = this.profitData.concat(data.data);
                this.sw = true;
              }
              if (!data.data || data.data.length == 0) {
                this.sw = false;
                // this.$refs.scroll.forceUpdate();
                this.options.pullUpLoad = false;
                return;
              }
            }
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '~common/scss/index.scss';
  @import "~common/scss/variable";
  @import "~common/scss/mixin";

  .page {
    height: 100%;
    /*overflow: auto;*/
    background: #fff;
  }
  .no-profit-data{
    text-align:center;
    color:#00A989;
    margin-top:30px;
  }
  .item{
    margin: 0 30px;
    border-bottom:1px solid #F6F6F6;
    h3{
      display:flex;
      justify-content: space-between;
      margin:29px 0 16px;
      font-size:30px;
      span{
        color:#202C5B;
      }
      .special-tip{
        color:#5872F1;
      }
      strong{
        font-weight:600;
        color:#00A989;
      }
    }
    p{
      margin-bottom:29px;
      color:#71768C;
    }
  }





</style>
